<script lang="ts">
export default {
  name: 'TrunkFaultStatistics',
};
</script>

<!-- 干线故障统计  -->

<script setup lang="ts">
import { computed, ref } from 'vue';
import { ArrowUpIcon, RectangleIcon } from 'tdesign-icons-vue-next';
import proxy from '@/config/proxy';

const headers = ref({
  Authorization: `Bearer ${import.meta.env.VITE_DIFY_API_KEY}`,
});

const props = defineProps({
  message: { type: String, default: '' }, // 移除父组件默认值
  files: Array,
  isLoading: Boolean,
});

const emit = defineEmits([
  'update:message',
  'update:files',
  'update:inputs',
  'send-message',
  'recover-event',
  'handle-upload-confirm',
  'stop-message',
]);

// 使用计算属性实现双向绑定
const localFiles = computed({
  get: () => props.files,
  set: (value) => emit('update:files', value),
});

// 使用计算属性实现双向绑定
const inputMessage = computed({
  // get: () => props.message || '请上传干线故障清单表',
  get: () => props.message || '请生成干线故障分析报告',
  set: (value) => emit('update:message', value),
});

const onCancelUpload = () => {
  console.log('cancel upload');
};
const onRemove = () => {
  console.log('remove file');
};

const handleEnter = (value, context) => {
  if (context.e.key === 'Enter' && !context.e.shiftKey) {
    context.e.preventDefault(); // 阻止默认换行行为
    seedDefaultMessage();
  }
};

const seedDefaultMessage = () => {
  emit('update:inputs', { scene: '干线故障统计' });
  emit('update:message', inputMessage.value || '请生成干线故障分析报告'); // 确保更新父组件值
  emit('send-message');
};
const handleUploadSuccess = ({ fileList }) => {
  emit('update:files', fileList); // 确保更新父组件值
};
// 计算上传地址
const uploadAction = computed(() => `${proxy.development.host}/files/upload`);
</script>

<template>
  <div class="input-area-container">
    <t-col class="input-with-button">
      <div class="input-box">
        <t-tooltip content="点击退出场景" class="input-type-title">
          <div @click="emit('recover-event')"><t-icon name="chevron-left" />干线故障统计</div>
        </t-tooltip>
        <t-textarea
          v-model="inputMessage"
          placeholder="请上传干线故障清单表"
          :autosize="{ minRows: 1, maxRows: 1 }"
          @keypress="handleEnter"
        />
      </div>
      <div class="action-buttons">
        <t-upload
          v-model="localFiles"
          class="file-box"
          :headers="headers"
          :auto-upload="true"
          theme="file"
          :data="{ user: 'user123' }"
          :abridge-name="[10, 8]"
          draggable=""
          :action="uploadAction"
          @cancel-upload="onCancelUpload"
          @remove="onRemove"
          @success="handleUploadSuccess"
        />
        <t-button
          v-if="!isLoading"
          :disabled="!localFiles.length > 0"
          class="send-btn"
          shape="circle"
          theme="primary"
          @click="seedDefaultMessage"
        >
          <template #icon>
            <arrow-up-icon />
          </template>
        </t-button>
        <t-button v-else class="stop-btn" shape="circle" theme="primary" @click="$emit('stop-message')">
          <template #icon>
            <rectangle-icon style="background-color: white; font-size: 12px" />
          </template>
        </t-button>
      </div>
    </t-col>
  </div>
</template>

<style scoped lang="less">
@import url('../index.less');
:deep(.t-upload__dragger) {
  width: 100%;
  margin-top: 10px;
}
</style>
